<template>
<div>
<!--  修改框-->
  <el-dialog title="修改信息"  :visible.sync="upformstatus" width="80%">
    <el-form ref="upformDate"  :rules="rules" :model="upform"  >
      <el-form-item label="id" prop="id"  style="display: none" >
        <el-input v-model="upform.id" placeholder="id"></el-input>
      </el-form-item>
      <el-form-item  prop="phone"  style="width: 100%" >
        <el-input :disabled="true"  placeholder="讲师个人信息" value="讲师个人信息" style="width: 80%;background: #F4F4F5"></el-input>
      </el-form-item>
      <table style="width: 100%">

        <tr style="width: 100%">
          <td width="50%"><el-form-item label="手机号" prop="phone" style="display: inline;width: 40%">
            <el-input :disabled="true" v-model="upform.phone" placeholder="手机号" style="width: 80%"></el-input>
          </el-form-item></td>
          <td width="50%"><el-form-item label="姓名" prop="name" style="display: inline;width: 40%">
            <el-input v-model="upform.name" placeholder="用户名" style="width: 80%"></el-input>
          </el-form-item></td>
        </tr>
        <tr>
          <td>
            <el-form-item label="邮箱：" prop="email">
              <el-input v-model="upform.email" placeholder="邮箱" style="width: 80%"></el-input>
            </el-form-item>
          </td>

          <td>
            <el-form-item label="序号" prop="sort">
              <el-input v-model="upform.sort" placeholder="序号" style="width: 80%"></el-input>
            </el-form-item>
          </td>
        </tr>
      </table>

      <el-form-item label="简介" prop="position">
        <el-input
            type="textarea"
            :rows="2"
            placeholder="简介"
            v-model="upform.intro">
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
                        <el-button @click="quxiaoup">取 消</el-button>
                        <el-button type="primary" @click="saveupForm" >确 定</el-button>
                    </span>
  </el-dialog>

  <el-dialog title="修改信息"  :visible.sync="fcformstatus" width="30%">
    <el-form ref="fcupform"  :model="fcupform"  >
      <el-form-item label="id" prop="id"  style="display: none" >
        <el-input v-model="fcupform.id" placeholder="id"></el-input>
      </el-form-item>
      <el-form-item label="分成" prop="fencheng">
        <el-input v-model="fcupform.fencheng" placeholder="分成%" style="width: 80%"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
                        <el-button @click="fcquxiaoup">取 消</el-button>
                        <el-button type="primary" @click="fcsaveupForm" >确 定</el-button>
                    </span>
  </el-dialog>
<!--  搜索框-->
  <el-form :inline="true" :model="formInline" ref="formInline" style="padding-top: 30px">
    <el-form-item label="讲师名称">
      <el-input v-model="formInline.name" placeholder="讲师名称"></el-input>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="formInline.phone" placeholder="手机号"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="formInline.status" placeholder="状态">
        <el-option label="正常" value="0"></el-option>
        <el-option label="禁用" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>查询</el-button>
      <el-button type="primary" @click="Reset"><i class="el-icon-refresh"></i>重置</el-button>
    </el-form-item>
  </el-form>
<!--  表单-->
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        fixed
        prop="id"
        label="序号">
    </el-table-column>
    <el-table-column
        prop="phone"
        label="手机号">
    </el-table-column>
    <el-table-column
        prop="name"
        label="讲师姓名">
    </el-table-column>
    <el-table-column
        prop="email"
        label="邮箱">
    </el-table-column>
    <el-table-column
        prop="fencheng"
        label="分成比例">
      <template slot-scope="scope">
        <span>{{scope.row.fencheng}}%</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="status"
        label="状态">
      <template slot-scope="scope">
        <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            :active-value="0"
            :inactive-value="1"
            active-text="启用"
            inactive-text="禁用"
            @change="changeStatus(scope.row.id,scope.row.status)"
            inactive-color="#ff4949">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作">
      <template slot-scope="scope">
<!--        <el-button type="success">修改</el-button>-->
        <el-button @click="handleClick(scope.row)" type="success" size="small">修改</el-button>
        <el-button type="primary" size="small" @click="fenchengClick(scope.row)">修改分成</el-button>
      </template>
    </el-table-column>
  </el-table>
<!--  分页-->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,10,15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  </el-pagination>
</div>
</template>

<script>
export default {
  name: "jslist",
  data(){
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('手机号不能为空'));
      } else {
        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        console.log(reg.test(value));
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error('请输入正确的手机号'));
        }
      }
    };
    return{
      //分页
      currentPage:1,
      pageSize:5,
      total:0,
      //查询表单
      formInline:{
      },

      //表格数据
      tableData:[],
      value:1,

      //修改信息框
      upform: {},
      upformstatus:false,

      //修改分成
      fcformstatus:false,
      fcupform:{},
      //新增表单验证
      rules:{
        name:[
          { required: true, message: '请输入讲师名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        phone:[
          {validator: checkPhone, trigger: 'blur'}
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
        ],
      },
    }
  },
  //初始化
  created() {
    this.init();
  },
  methods:{
    init(){

      var that = this;
      this.$http.post('/core/teacher/findTeachers/'+this.currentPage+"/"+this.pageSize,this.formInline).then(function (resp){
        that.tableData=resp.data.result.records
        that.total=resp.data.result.total
      })
    },
    //分页改变
    handleSizeChange(val) {
      this.pageSize=val;
      this.init();
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      this.init();
    },
    //查询
    onSubmit(){
    this.init()
    },
    //重置查询表
    Reset(){
      this.$refs.formInline.resetFields();
      this.formInline={}
    },
    //修改
    handleClick(item){
    // console.log(item)
      this.upformstatus=true
      this.upform=item
    },
    //修改状态
    changeStatus(id,status){
      var that = this;
      this.$http.get('/core/teacher/shenhejiangshi?id='+id+"&status="+status).then(function (resp) {
        if(resp.data.code==200){
          that.init()
        }
      })

    },

  //  修改表单操作=========================================

    //取消
    quxiaoup(){
      this.upformstatus=false
      this.$refs.upformDate.resetFields();
      this.upformDate={}
    },
    //提交
    saveupForm(){
      var that = this;
      this.$refs.upformDate.validate((valid) => {
        if (valid) {
          this.$http.post("/core/teacher/updateTeacherById",this.upform).then(function (resp){
            if(resp.data.code==200){
              that.upformstatus=false
              that.$refs.upformDate.resetFields();
              that.upformDate={}
              that.init()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    // 修改分成=====================================
    //分成
    fenchengClick(item){
      this.fcformstatus=true
      this.fcupform=item

    },
    //取消
    fcquxiaoup(){
      this.fcformstatus=false
      this.$refs.fcupform.resetFields();
      this.fcupform={}
    },
    fcsaveupForm(){
      var that = this;
      this.$http.get('/core/teacher/updatefenchengById?id='+this.fcupform.id+'&fencheng='+this.fcupform.fencheng).then(function (resp){
        if(resp.data.code==200){
          that.fcformstatus=false
          that.$refs.fcupform.resetFields();
          that.fcupform={}
          that.init()
        }
      })
    },
  }
}
</script>

<style scoped>
td{
  padding-top: 15px;
  padding-bottom: 15px;
}
</style>